import React, { Component } from 'react';
import styled from 'styled-components';
import axios from '../util/axios'
import { Toast } from 'antd-mobile'
import '../css/style.css'

//设置局部样式
const LoginDiv = styled.div`
            box-sizing: border-box;
            padding-left: 10px;
            padding-right: 10px;

        .input1{
            appearance: none;
            -webkit-appearance: none;
            box-sizing: border-box;
            border: 1px solid #de3232;
            border-radius: 5px;
            width: 100%;
            min-width: 1px;
            height: 38px;
            padding-left: 10px;
            outline: none;
            font-size: 18px;      
        }
        .input1::placeholder{
            color: #a5a5a5;
            font-size: 18px;
        }

        .login_btn{
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            min-width: 1px;
            height: 38px;
            border-radius: 5px;
            background-color: #de3232;
            color: #ffffff;
            font-size: 18px;
            outline: none;
            text-align: center;
        }
        .link_btn{
            color: #4d35a6;
            font-size: 14px;
            text-decoration: underline;
        }

`

class Login extends Component {
    state = {
        username: '',
        password: ''
    }

    handle = (e) => {
        // console.log(e)
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    goLigon = () => {

        axios.post('/login', {
            username: this.state.username,
            password: this.state.password
        }).then(res => {
            // console.log(res)
            if (res.status === 'success') {
                //在本地localstorage中保存用户登录信息和token值
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('userinfo', JSON.stringify(res.data.userinfo))
                this.props.history.replace('/index')
            } else {
                Toast.show({
                    content: res.msg,
                    position: 'top',
                })
            }
        }).catch(err => {
            console.log(err)
        })
    }
    render() {
        return (
            <LoginDiv>
                <div className="m_t25">
                    <input type="text" className="input1" value={this.state.username} placeholder="用户名" name="username" onChange={this.handle} />
                </div>

                <div className="m_t25">
                    <input type="password" className="input1" placeholder="密码" name='password' onChange={this.handle} value={this.state.password} />
                </div>

                <div className="m_t25" >

                    {/* a button(disabled)   */}
                    <input type="button" className="login_btn" value="登录" onClick={this.goLigon} />
                </div>

                <div className="m_t15">

                    <div className="tar">
                        <a className="link_btn" onClick={() => {
                            this.props.history.push('/sign')
                        }}>注册</a>
                    </div>

                </div>
            </LoginDiv>
        );
    }
}

export default Login;
